<template>
  <view class="user-page">
    <!-- 用户信息区域 -->
    <view class="user-section">
      <view class="user-info">
        <Avatar :src="userInfo.avatar" size="120rpx" class="avatar" />
        <view class="info-text">
          <text class="nickname">{{ userInfo.userName || '管理员用户' }}</text>
          <text class="phone">手机号：{{ userInfo.mobile || '13111111111' }}</text>
        </view>
      </view>
    </view>

    <!-- 其他服务 -->
    <view class="service-section">
      <view class="section-title">
        <text>其他服务</text>
      </view>
      <view class="service-list">
        <view class="service-item" v-for="(item, index) in otherServiceList" :key="index" @click="linkOther(item.type)">
          <image class="service-icon" :src="item.icon" mode="aspectFit"></image>
          <text class="service-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <dui-toast ref="toast"></dui-toast>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { baseConfig } from '@/http/request'
import Avatar from '@/components/Avatar.vue'

import { getUserInfoApi } from '@/api/user'

const toast = ref(null)

const otherServiceList = reactive([
  {
    type: 'setting',
    name: '设置',
    icon: '../../static/icon/setting.png'
  }
])

const linkOther = (type) => {
  let url = ''
  switch (type) {
    case 'setting':
      url = '/pages/user/setting/setting'
      break
    default:
      break
  }
  url &&
    uni.navigateTo({
      url
    })
}

const userInfo = ref({})
const getUserInfo = async () => {
  const res = await getUserInfoApi()
  userInfo.value = res.data
}

onShow(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.user-section {
  background-color: #ffffff;
  padding: 60rpx 30rpx 40rpx;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;

  .avatar {
    margin-right: 30rpx;
  }

  .info-text {
    flex: 1;

    .nickname {
      display: block;
      font-size: 34rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 16rpx;
    }

    .phone {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.service-section {
  background-color: #ffffff;
  margin: 0 30rpx;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border-radius: 12rpx;
  background-color: #fafafa;
  transition: background-color 0.2s;

  &:active {
    background-color: #f0f0f0;
  }
}

.service-icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 16rpx;
}

.service-name {
  font-size: 26rpx;
  color: #333333;
  text-align: center;
}
</style>
